<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form表单使用</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

  <div id="app">
      <!--input-->
      <input type="text" v-model="msg">
      <div>{{msg}}</div>
      <hr>
      <!--textarea   white-space: pre-line;换行的用法-->
      <textarea v-model='textarea' cols="30" rows="10"></textarea>
      <p style="white-space: pre-line;">{{textarea}}</p>
      <hr>
      <!--checkbox 选中得到true 补选中 false   单个的话，可以用变量来绑定-->
      <input type="checkbox" v-model="isRead">
      <div>{{isRead}}</div>
      <hr>
      <!--favorites  多个的话，可以用数组来绑定 可以得到选中的值-->
      <input type="checkbox" value="足球" v-model="favorites">足球</input>
      <input type="checkbox" value="篮球" v-model="favorites">篮球</input>
      <input type="checkbox" value="乒乓球" v-model="favorites">乒乓球</input>
      <div>{{favorites}}</div>

      <!--select的多选  multiple-->
      <select v-model="favorites" multiple>
          <option value="足球">足球</option>
          <option value="篮球">篮球</option>
          <option value="乒乓球">乒乓球</option>
      </select>

      <select v-model="favorites" multiple>
          <!--下边的一行是遍历fs v-bind:key需要注意下 -->
          <option v-for="(f,index) in fs" v-bind:key="index" v-bind:value="f">{{f}}</option>
      </select>
      <hr>
      <!--radio  得到的是value的值-->
      性别：
      <input type="radio" value="1" v-model="gender">男
      <input type="radio" value="0" v-model="gender">女
      <div>{{gender}}</div>
      <hr>
      <hr>
       <!--      select-->
      学历:
      <select v-model="edu">
          <option value="1">小学</option>
          <option value="2">初中</option>
          <option value="3">高中</option>
      </select>
      <div>{{edu}}</div>
      <hr/>
      <!--值的动态绑定  如果是true为yes  否则为no-->
      <input type="checkbox" true-value="yes" false-value="no" v-model="toggle">
      <div>{{toggle}}</div>
      <hr>
      <!--lazy只有在回车或者移除时的情况下才同步显示-->
      <input type="text" v-model.lazy="msg">
      <div>{{msg}}</div>
      <hr>
  </div>

<script>
    var app =new Vue({
      el:"#app",
        data: {
             msg:'hello world',
            textarea:'',
            isRead:true,
            favorites: [],
            gender:'',
            edu:'',
            fs:[
                '足球',
                '篮球',
                '乒乓球'
            ],
            toggle:'',



        },

    });

</script>

</body>
</html>